<template>
  <div class="views-container">
    <div class="wlm-table">
      <!-- 工具条区域 -->
      <div class="wlm-table-hearder-btn">
        <el-button size="small" type="primary" @click="showdialog(1)"
          >新增分类</el-button
        >
      </div>
      <!-- 工具条区域 end -->
      <!-- 表格区域 -->
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.cardBagCategory.key"
          :default-sort="{ prop: 'sort', order: 'descending' }"
          :data="tableFormatData.cardBagCategory.tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop="name" label="分类名称" />
          <el-table-column prop="sort" width="80" label="排序" sortable>
            <template slot-scope="scope">
              <el-input-number
                @blur="
                  changeTableItem(
                    {
                      card_class_id: scope.row.card_class_id,
                      sort: scope.row.sort,
                    },
                    tableFormatData.cardBagCategory.api.change.sort
                  )
                "
                style="width: 100%"
                size="mini"
                v-model="scope.row.sort"
                :controls="false"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="is_show" label="是否显示">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_show"
                :active-value="1"
                :inactive-value="2"
                @change="
                  changeTableItem(
                    {
                      card_class_id: scope.row.card_class_id,
                      is_show: scope.row.is_show,
                    },
                    tableFormatData.cardBagCategory.api.change.is_show
                  )
                "
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="showdialog(2, scope.row.card_class_id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="delTableItem(scope.row.card_class_id)" 
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.cardBagCategory.pagination.page"
            :page-sizes="tableFormatData.cardBagCategory.pagination.pagesizes"
            :page-size.sync="
              tableFormatData.cardBagCategory.pagination.list_rows
            "
            layout="total, sizes, prev, pager, next, jumper"
            :total="
              hasTableData
                ? tableFormatData.cardBagCategory.pagination.total
                : 0
            "
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表格区域 end -->
      <!-- 表单区域 -->
      <el-dialog
        @close="saveDialogForm"
        :visible.sync="dialogFormVisible"
        custom-class="reset-pwd wlm-form-dialog dialog-table"
      >
        <div class="wlm-form" v-if="dialogFormVisible">
          <div class="wlm-form-header wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">卡包分类</span>
          </div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <div class="wlm-form-content">
              <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                  <el-form
                    :ref="formFormatData.key"
                    :model="formFormatData.formData"
                    :rules="formFormatData.rules"
                    size="small"
                    label-width="100px"
                    class="retail-form"
                    label-position="right"
                  >
                    <!-- 分类名称 -->
                    <el-form-item label="分类名称" prop="name">
                      <el-input
                        v-model.trim="formFormatData.formData.name"
                        :disabled="
                          formFormatData.formData.default == 1 ? true : false
                        "
                        placeholder="请输入卡包分类名称"
                        style="width: 160px"
                        :maxlength="4"
                      >
                      </el-input>
                      <div class="form-help">名称不能超过4个字</div>
                    </el-form-item>
                    <!-- 分类名称 -->
                    <el-form-item label="分类别称" prop="alias_title">
                      <el-input
                        v-model.trim="formFormatData.formData.alias_title"
                        :disabled="
                          formFormatData.formData.default == 1 ? true : false
                        "
                        placeholder="请输入卡包分类名称"
                        style="width: 160px"
                        :maxlength="4"
                      >
                      </el-input>
                      <div class="form-help">别称不能超过4个字</div>
                    </el-form-item>
                    <!-- 排序 -->
                    <el-form-item label="排序" prop="sort">
                      <el-input
                        onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                        maxlength="5"
                        :controls="false"
                        v-model.trim="formFormatData.formData.sort"
                        :disabled="
                          formFormatData.formData.default == 1 ? true : false
                        "
                        placeholder="排序"
                        style="width: 160px"
                      ></el-input>
                      <div class="form-help">注:数值越大越靠前</div>
                    </el-form-item>
                    <!-- 是否显示 -->
                    <el-form-item label="是否显示" prop="is_show">
                      <el-switch
                        v-model="formFormatData.formData.is_show"
                        :active-value="1"
                        :inactive-value="2"
                      >
                      </el-switch>
                    </el-form-item>
                    <!-- 缩略图 -->
                    <el-form-item label="缩略图" ref="merchantlog">
                      <choose-files
                        ref="chooseFiles"
                        :config="chooseLogoConfig"
                        :changeEvt="formFormatFiltersChange"
                      ></choose-files>
                      <div class="form-help">
                        建议尺寸：200*200像素
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <footer
          class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter"
        >
          <el-button size="small" @click="formFormatSubmit" type="primary"
            >保存</el-button
          >
        </footer>
      </el-dialog>
      <!-- 表单区域 end -->
    </div>
  </div>
</template>

<script>
import {
  cardIndex,
  cardDestroy,
  cardEditShow,
  cardClassEditSort,
  cardClassSave,
  cardClassShow,
} from "@/api/cardBag";
import mixins from "@/mixins/mixins";
import ChooseFiles from "@/components/ChooseFiles/index";
export default {
  mixins: [mixins.getters("Table"), mixins.getters("Form")],
  components: {
    ChooseFiles,
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      chooseLogoConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          model: "display",
        },
        initList: [],
        // isShowList: true,
        file_type: "image",
        bindKey: {
          key: "image",
          model: "img",
        },
      },
      tableFormatData: {
        current: "cardBagCategory",
        cardBagCategory: {
          key: "cardBagCategory",
          api: {
            getList: cardIndex,
            delList: cardDestroy,
            change: {
              sort: {
                key: "sort",
                api: cardClassEditSort,
              },
              is_show: {
                key: "is_show",
                api: cardEditShow,
              },
            },
          },
          tableData: [],
          files: {

          },
          rowId: "card_class_id",
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
      formFormatData: {
        key: "cardBagCategory",
        model: {
          noCreateEdit: false,
          bindDialog: "dialogFormVisible",
        },
        api: {
          editForm: {
            // 编辑回填
            api: cardClassShow,
            params: {
              card_class_id: this.card_class_id,
            },
            filters: {
              img: {
                bindInit: ["chooseLogoConfig"],
              },
            },
            redirect: "card_class_id",
          },
          submitForm: cardClassSave,
        },
        formData: {
          name: "",
          alias_title: "",
          sort: "",
          is_show: 1,
          image: [],
          default: "",
        },
        rules: {
          name: [
            {
              message: "请填写分类名称",
              required: true,
              trigger: "change",
            },
          ],
          alias_title: [
            {
              message: "请填写分类别称",
              required: true,
              trigger: "change",
            },
          ],
          image: [
            {
              message: "请上传图片",
              required: true,
              trigger: "change",
            },
          ],
          sort: [
            {
              message: "请填写排序",
              required: true,
              trigger: "change",
            },
          ],
          is_show: [
            {
              message: "请选择是否显示",
              required: true,
              trigger: "change",
            },
          ],
        },
      },
    };
  },
  methods: {
    showdialog(type, params) {
      if (type === 1) {
        // this.formFormatData=[]
        this.formFormatData.api.submitForm = cardClassSave;
        this.dialogFormVisible = true;
      }
      if (type === 2) {
        this.formFormatData.api.submitForm = cardClassSave;
        this.formFormatDialogEditEvt({
          id: params,
          toggle: "dialogFormVisible",
        });
      }
    },
    saveDialogForm() {
      this.resetDialogFormData({
        name: "",
        sort: "",
        is_show: "",
        image: [],
        alias_title: ""
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>